<template>
  <div class="app-container">
    <el-alert
      v-if="$route.query.type == 'edit'"
      :title="`提示：编辑后,该${
        $schoolName ? $schoolName : '学校'
      }拥有所有权限的账号权限会同步更改,请谨慎编辑`"
      type="warning"
    >
    </el-alert>
    <div class="titleLineGreen" style="margin-top: 16px">
      {{ $schoolName ? $schoolName : '学校' }}信息
    </div>
    <el-form
      class="edit_all"
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
    >
      <el-row>
        <!-- 学校名称 -->
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type != 'detial'"
            :label="`${$schoolName ? $schoolName : '学校'}名称`"
            prop="schoolName"
          >
            <el-input
              class="edit_right_item"
              v-model="form.schoolName"
              :placeholder="`请输入${$schoolName ? $schoolName : '学校'}名称`"
            />
          </el-form-item>
          <el-form-item
            v-if="$route.query.type == 'detial'"
            :label="`${$schoolName ? $schoolName : '学校'}名称`"
          >
            <div class="detial_text">{{ form.schoolName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type != 'detial'"
            :label="`${$schoolName ? $schoolName : '学校'}前缀`"
            prop="protocolPrefix"
          >
            <el-input
              class="edit_right_item"
              v-model="form.protocolPrefix"
              :placeholder="`请输入${$schoolName ? $schoolName : '学校'}前缀`"
            />
          </el-form-item>
          <el-form-item
            v-if="$route.query.type == 'detial'"
            :label="`${$schoolName ? $schoolName : '学校'}前缀`"
          >
            <div class="detial_text">{{ form.protocolPrefix }}</div>
          </el-form-item>
        </el-col>
        <!-- 办学层次 -->
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
            label="办学层次"
            prop="hierarchy"
          >
            <el-select
              class="edit_right_item"
              filterable
              v-model="form.hierarchy"
              placeholder="办学层次"
              clearable
            >
              <el-option
                v-for="item in hierarchys"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="$route.query.type == 'detial'" label="办学层次">
            <div class="detial_text">
              {{ form.hierarchy }}
            </div>
          </el-form-item>
        </el-col>
        <!-- 省份 -->
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
            label="所在省份"
            prop="province"
          >
            <el-select
              class="edit_right_item"
              filterable
              v-model="form.province"
              placeholder="所在省份"
              clearable
            >
              <el-option
                v-for="item in provinces"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="$route.query.type == 'detial'" label="所在省份">
            <div class="detial_text">
              {{ form.province }}
            </div>
          </el-form-item>
        </el-col>
        <!-- 学校域名 -->
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
            label="学校域名"
            prop="domainName"
          >
            <el-input
              class="edit_right_item"
              v-model="form.domainName"
              :placeholder="`请输入${$schoolName ? $schoolName : '学校'}域名`"
            />
          </el-form-item>
          <el-form-item v-if="$route.query.type == 'detial'" label="学校域名">
            <div class="detial_text">
              {{ form.domainName }}
            </div>
          </el-form-item>
        </el-col>
        <!-- 学校logo -->
        <el-col :span="12">
          <el-form-item
            v-if="$route.query.type != 'detial'"
            :label="`${$schoolName ? $schoolName : '学校'}logo`"
            prop="schoolPic"
          >
            <div class="">
              <!-- 上传图片 -->
              <div
                v-if="form.schoolPic == ''"
                class="upload-head"
                @click="editCropper()"
              >
                <div>
                  <img src="@/assets/images/add.png" class="add" alt="加载失败"/>
                </div>
                <div>上传图片</div>
              </div>
              <div v-else class="upload-head-edit" @click="editCropper()">
                <img v-bind:src="form.schoolPic" class="show_img_edit"/>
              </div>
              <div class="uploadTip_edit">
                建议图片比例4:1或320*80px，支持jpg、png格式，图片小于5M
              </div>
            </div>
            <vuecut
              :w="320"
              :h="80"
              v-if="$route.query.type != 'detial'"
              :url="form.schoolPic"
              @coverResult="coverResult"
              title="图片上传"
              :open.sync="vuecutshow"
            ></vuecut>
          </el-form-item>
          <el-form-item
            v-if="$route.query.type == 'detial'"
            :label="`${$schoolName ? $schoolName : '学校'}logo`"
          >
            <el-image
              class="upload-head-edit"
              :src="form.schoolPic"
              :preview-src-list="[form.schoolPic]"
            >
            </el-image>
          </el-form-item>
        </el-col>
        <!-- 学校地区 -->
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type != 'detial'"
            :label="`${$schoolName ? $schoolName : '学校'}地址`"
            prop="schoolArea"
          >
            <el-cascader
              class="edit_right_item"
              v-model="form.schoolArea"
              :options="options"
              :props="TagProps"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            v-if="$route.query.type == 'detial'"
            :label="`${$schoolName ? $schoolName : '学校'}地址`"
          >
            <div class="detial_text">
              {{
                form.schoolArea ? form.schoolArea.join('') : ''
              }}{{ form.schoolAddress }}
            </div>
          </el-form-item>
        </el-col>
        <!-- 详细地址 -->
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type != 'detial'"
            label="详细地址"
            prop="schoolAddress"
          >
            <el-input
              class="edit_right_item"
              maxlength="500"
              show-word-limit
              :rows="4"
              v-model="form.schoolAddress"
              type="textarea"
              placeholder="请输入详细地址"
            />
          </el-form-item>
          <!-- <el-form-item v-if="$route.query.type == 'detial'" label="详细地址">
            <div class="detial_text" style="white-space: pre-wrap">
              {{ form.schoolAddress }}
            </div>
          </el-form-item> -->
        </el-col>
        <!-- 起止时间 -->
        <el-col :span="24" style="display: flex">
          <el-form-item
            v-if="$route.query.type == 'add'"
            label="起止日期"
            prop="startTime"
          >
            <el-date-picker
              class="w_248"
              :picker-options="pickerOptionsEnd"
              v-model="form.startTime"
              type="date"
              clearable
              placeholder="开始日期"
            >
            </el-date-picker>
          </el-form-item>
          <span v-if="$route.query.type == 'add'" style="margin: 7px 10px 0"
          >至</span
          >
          <el-form-item
            v-if="$route.query.type == 'add'"
            prop="endTime"
            label-width="0px"
          >
            <el-date-picker
              class="w_248"
              :picker-options="pickerOptionsStart"
              v-model="form.endTime"
              type="date"
              clearable
              placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item v-if="$route.query.type == 'detial'" label="起止日期">
            <div class="detial_text">
              {{ form.startTime ? parseTime(form.startTime).slice(0, 10) : '' }}
              -- {{ form.endTime ? parseTime(form.endTime).slice(0, 10) : '' }}
            </div>
          </el-form-item>
        </el-col>
        <!-- 级别 -->
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type == 'add'"
            label="级别"
            prop="levelId"
          >
            <el-select
              class="edit_right_item"
              filterable
              v-model="form.levelId"
              placeholder="级别"
              clearable
            >
              <el-option
                v-for="item in level"
                :key="item.levelId"
                :label="item.levelName"
                :value="item.levelId"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="$route.query.type == 'detial'" label="级别">
            <div class="detial_text">{{ form.levelName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type != 'detial'"
            label="联系人"
            prop="principal"
          >
            <el-input
              class="edit_right_item"
              v-model="form.principal"
              placeholder="请输入联系人"
            />
          </el-form-item>
          <el-form-item v-if="$route.query.type == 'detial'" label="联系人">
            <div class="detial_text">{{ form.principal }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type != 'detial'"
            label="电话"
            prop="tel"
          >
            <el-input
              class="edit_right_item"
              v-model="form.tel"
              placeholder="请输入电话"
            />
          </el-form-item>
          <el-form-item v-if="$route.query.type == 'detial'" label="电话">
            <div class="detial_text">{{ form.tel }}</div>
          </el-form-item>
        </el-col>
        <!-- 详细地址 -->
        <el-col :span="24">
          <el-form-item
            v-if="$route.query.type != 'detial'"
            :label="`${$schoolName ? $schoolName : '学校'}简介`"
            prop="content"
          >
            <el-input
              class="edit_right_item"
              maxlength="500"
              show-word-limit
              :rows="4"
              v-model="form.content"
              type="textarea"
              :placeholder="`请输入${$schoolName ? $schoolName : '学校'}简介`"
            />
          </el-form-item>
          <el-form-item
            v-if="$route.query.type == 'detial'"
            :label="`${$schoolName ? $schoolName : '学校'}简介`"
            prop="content"
          >
            <div class="detial_text" style="white-space: pre-wrap">
              {{ form.content }}
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 权限表格 -->
      <!--      <div class="titleLineGreen" style="margin-top: 16px">功能权限</div>-->
      <!--      <el-table :data="tableData" style="width: 100%; margin: 11px 0 14px 0">-->
      <!--        <el-table-column prop="date" label="可见页面" width="180">-->
      <!--        </el-table-column>-->
      <!--        <el-table-column prop="name" label="功能权限"> </el-table-column>-->
      <!--      </el-table>-->
    </el-form>
    <div class="form_right">
      <el-button @click="cancel">{{
          $route.query.type == 'detial' ? '关 闭' : '取 消'
        }}
      </el-button>
      <el-button
        v-if="$route.query.type == 'edit'"
        type="primary"
        @click="submitForm($route.query.type)"
      >
        <!--        {{ $route.query.type == "add" ? "保 存" : "修 改" }}-->
        保 存
      </el-button>
      <el-button
        type="primary"
        @click="submitForm($route.query.type)"
        v-if="$route.query.type == 'add'"
      >确认添加
      </el-button
      >
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="提交审核"
      :visible.sync="showExamineDialog"
      width="500px"
      append-to-body
    >
      <el-form
        ref="examineForm"
        :model="examineForm"
        :rules="examineFormRules"
        label-width="80px"
      >
        <el-form-item label="级别" prop="levelId">
          <el-select
            filterable
            class="level_add"
            v-model="examineForm.levelId"
            placeholder="级别"
            clearable
          >
            <el-option
              v-for="item in level"
              :key="item.levelId"
              :label="item.levelName"
              :value="item.levelId"
            />
          </el-select>
        </el-form-item>
        <div style="display: flex">
          <el-form-item label="起止日期" prop="startTime">
            <el-date-picker
              class="startTime_add"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptionsEnd2"
              v-model="examineForm.startTime"
              type="date"
              clearable
              placeholder="开始日期"
            >
            </el-date-picker>
          </el-form-item>
          <span style="margin: 7px 10px 0">至</span>
          <el-form-item prop="endTime" label-width="0px">
            <el-date-picker
              class="startTime_add"
              :picker-options="pickerOptionsStart2"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="examineForm.endTime"
              type="date"
              clearable
              placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-preventReClick @click="cancelExamineForm">取 消</el-button>
        <el-button v-preventReClick type="primary" @click="submitExamineForm"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ChinaCitys from '@/utils/ChinaCitys.json'
import router from '@/router'
import { listPost } from '@/api/school/level'
import {
  listPost_school,
  getPost_school,
  schoolAudit,
  addPost_school,
  updatePost_school
} from '@/api/school/list'

export default {
  name: 'Post',
  data() {
    let config = []
    Object.assign(config, ChinaCitys)
    return {
      provinces: [
        { name: '北京市' },
        { name: '天津市' },
        { name: '上海市' },
        { name: '重庆市' },
        { name: '河北省' },
        { name: '山西省' },
        { name: '内蒙古自治区' },
        { name: '辽宁省' },
        { name: '吉林省' },
        { name: '黑龙江省' },
        { name: '江苏省' },
        { name: '浙江省' },
        { name: '安徽省' },
        { name: '福建省' },
        { name: '江西省' },
        { name: '山东省' },
        { name: '河南省' },
        { name: '湖北省' },
        { name: '湖南省' },
        { name: '广东省' },
        { name: '广西壮族自治区' },
        { name: '海南省' },
        { name: '四川省' },
        { name: '贵州省' },
        { name: '云南省' },
        { name: '西藏自治区' },
        { name: '陕西省' },
        { name: '甘肃省' },
        { name: '青海省' },
        { name: '宁夏回族自治区' },
        { name: '新疆维吾尔自治区' },
        { name: '台湾省' },
        { name: '香港特别行政区' },
        { name: '澳门特别行政区' }
      ],
      examineForm: {
        levelId: '',
        startTime: '',
        endTime: ''
      },
      showExamineDialog: false,
      routetitle: `添加${this.$schoolName ? this.$schoolName : '学校'}`,
      tableData: [],
      pickerOptionsStart: {
        // 时间只能大于startTime
        disabledDate: (time) => {
          if (!this.form.startTime) {
            return
          }
          return time.getTime() < new Date(this.form.startTime).getTime()
        }
      },
      pickerOptionsEnd: {
        // 时间只能小于startTime
        disabledDate: (time) => {
          if (!this.form.endTime) {
            return
          }
          return time.getTime() > new Date(this.form.endTime).getTime()
        }
      },
      pickerOptionsStart2: {
        // 时间只能大于startTime
        disabledDate: (time) => {
          if (!this.examineForm.startTime) {
            return
          }
          return (
            time.getTime() < new Date(this.examineForm.startTime).getTime()
          )
        }
      },
      pickerOptionsEnd2: {
        // 时间只能小于startTime
        disabledDate: (time) => {
          if (!this.examineForm.endTime) {
            return
          }
          return time.getTime() > new Date(this.examineForm.endTime).getTime()
        }
      },
      vuecutshow: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // level
      level: [],
      // 查询参数
      activeIndex: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schoolName: undefined,
        level: undefined
      },
      levels: [
        { id: 1, name: '级别一' },
        { id: 2, name: '级别二' }
      ],
      hierarchys: [
        { id: 1, name: '技师学院' },
        { id: 2, name: '大专' },
        { id: 3, name: '高职' },
        { id: 4, name: '高级技工学校' },
        { id: 5, name: '技工学校' },
        { id: 6, name: '职业高中' },
        { id: 7, name: '中等专业学校' }
      ],
      // 表单参数
      form: {
        ccSchoolConfig: {
          applyLimit: 0,
          applyNeedCheck: 0,
          id: 0,
          remark: '',
          schoolId: 0,
          selectionPre: 0,
          status: 0
        },
        content: '',
        deptId: 0,
        email: 0,
        endTime: '',
        startTime: '',
        time: '',
        province: '',
        domainName: '',
        hierarchy: '',
        levelId: '',
        levelName: '',
        principal: '',
        remark: '',
        schoolAddress: '',
        schoolArea: '',
        schoolId: '',
        schoolName: '',
        schoolNum: '',
        schoolPic: '',
        status: 0,
        tel: ''
      },
      examineFormRules: {
        hierarchy: [
          { required: true, message: '办学层次不能为空', trigger: 'blur' }
        ],
        levelId: [{ required: true, message: '级别不能为空', trigger: 'blur' }],
        startTime: [
          { required: true, message: '开始日期不能为空', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '结束日期不能为空', trigger: 'blur' }
        ]
      },
      // 表单校验
      rules: {
        protocolPrefix: [
          {
            required: true,
            message: `${
              this.$schoolName ? this.$schoolName : '学校'
            }前缀不能为空`,
            trigger: 'blur'
          }
        ],
        domainName: [
          {
            required: true,
            message: `${
              this.$schoolName ? this.$schoolName : '学校'
            }域名不能为空`,
            trigger: 'blur'
          }
        ],
        schoolName: [
          {
            required: true,
            message: `${
              this.$schoolName ? this.$schoolName : '学校'
            }名称不能为空`,
            trigger: 'blur'
          }
        ],
        schoolArea: [
          {
            required: true,
            message: `${
              this.$schoolName ? this.$schoolName : '学校'
            }地区不能为空`,
            trigger: 'blur'
          }
        ],
        schoolPic: [
          {
            required: true,
            message: `${
              this.$schoolName ? this.$schoolName : '学校'
            }logo不能为空`,
            trigger: 'blur'
          }
        ],
        province: [
          { required: true, message: '所在省份不能为空', trigger: 'blur' }
        ],
        levelId: [{ required: true, message: '级别不能为空', trigger: 'blur' }],
        hierarchy: [
          { required: true, message: '办学层次不能为空', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '开始日期不能为空', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '结束日期不能为空', trigger: 'blur' }
        ],
        principal: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        tel: [{ required: true, message: '电话不能为空', trigger: 'blur' }]
      },
      TagProps: {
        value: 'label',
        label: 'label',
        children: 'children'
      },
      //   学校地区 列表
      options: ChinaCitys,
      //   起止时间 便捷方式
      pickerOptions: {
        shortcuts: [
          {
            text: '未来一年',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 365)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '未来三年',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 365 * 3)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '未来五年',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 365 * 5)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getLevel()
    if (this.$route.query.schoolId !== undefined) {
      this.routetitle = `编辑${
        this.$schoolName ? this.$schoolName : '学校'
      }信息`
      let title = `编辑${this.$schoolName ? this.$schoolName : '学校'}信息`
      if (this.$route.query.type == 'detial') {
        this.routetitle = `查看${
          this.$schoolName ? this.$schoolName : '学校'
        }详情`
        title = `查看${this.$schoolName ? this.$schoolName : '学校'}详情`
      }
      const route = Object.assign({}, this.$route, {
        title: `${title}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
      this.getSchoolInfo()
    }
  },
  methods: {
    cancelExamineForm() {
      this.$refs['examineForm'].resetFields()
      this.showExamineDialog = false
    },
    submitExamineForm() {
      this.$refs['examineForm'].validate(async(valid) => {
        if (valid) {
          let params = {
            schoolId: this.$route.query.schoolId,
            ...this.examineForm
          }
          let res = await schoolAudit(params)
          if (res) {
            this.$modal.msgSuccess(`提交成功`)
            this.showExamineDialog = false
          }
        }
      })
    },
    getSchoolInfo() {
      let reg = /.+?(省|市|自治区|自治州|县|区)/g
      getPost_school(this.$route.query.schoolId).then((res) => {
        res.data.schoolArea = res.data.schoolArea.match(reg)
        this.form = res.data
      })
    },
    coverResult(e) {
      this.form.schoolPic = e
    },
    getLevel() {
      listPost({
        pageNum: 1,
        pageSize: 999
      }).then((response) => {
        this.level = response.rows
      })
    },
    getList() {
      this.loading = true
      listPost_school(this.queryParams).then((response) => {
        this.postList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    editCropper() {
      this.vuecutshow = true
    },
    cancel() {
      this.$store.dispatch('tagsView/delView', router.currentRoute)
      setTimeout(() => {
        this.$router.push({ path: '/school/list' })
      }, 100)
    },
    /** 提交按钮 */
    submitForm(type) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.form))
          data.schoolArea = data.schoolArea.join('')
          if (type == 'add') {
            data.status = 0
          }
          if (this.$route.query.schoolId) {
            updatePost_school(data).then(() => {
              this.cancel()
            })
          } else {
            addPost_school(data).then(() => {
              this.cancel()
            })
          }
          this.$modal.msgSuccess(`${type == 'add' ? '添加成功' : '保存成功'}`)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  width: 100%;
}

.detial_text {
  box-sizing: border-box;
  color: #606266;
  font-size: 14px;
  padding-right: 20px;
}

.sub_examine {
  margin-left: 10px;
}

.startTime_add {
  width: 160px;
}

.level_add {
  width: 354px;
}

.edit_right_item {
  width: 530px;
}

.w_248 {
  width: 248px;
}

.edit_all {
  margin-top: 20px;
}

.form_right {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.mid_center {
  width: 100%;
  display: flex;
  //justify-content: center;
}

.upload-head-edit {
  width: 322px;
  height: 82px;
  border: 1px dashed #b8c4d1;
  border-radius: 4px;
  cursor: pointer;
}

.show_img_edit {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.uploadTip_edit {
  font-size: 12px;
  font-weight: 400;
  color: #a6a6a6;
}
</style>
